import { Button, Flex, Input, Select, Table } from "antd"
import { Access, styled } from '@umijs/max'

const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
`

interface GoodsStockProps {
  value?: Goods.GoodsStock[]
  onChange?: (value?: Goods.GoodsStock[]) => void
  style?: React.CSSProperties
}

export const rangeValidator = (value?: Goods.GoodsStock[]) => {
  if (!value?.length) {
    return Promise.reject(new Error('请添加商品SKU'))
  }
  return Promise.resolve()
}

const GoodsStock: React.FC<GoodsStockProps> = props => {
  const del = (id: number) => {
    props.onChange?.(props.value?.filter(it => it.stockId !== id && it.fakeId !== id))
  }

  const onChange = (e: any, index: number) => {
    const { files } = e.target
    if (files.length < 1) return
    const URL = window.URL || window.webkitURL
    const _url = URL.createObjectURL(files[0])
    props.value![index].stockImg = _url
  }

  return (
    <Container style={props.style}>
      {
        props.value?.map((sku, index) => {
          return <div className="flex gap-2" key={sku.stockId || sku.fakeId}>
            <div className="w-15 h-15 rounded-lg overflow-hidden relative">
              <Access accessible={!!sku.stockImg} fallback={
                <input className="absolute inset-0 opacity-0" type="file" accept='image/jpg, image/png' onChange={e => onChange(e, index)} />
              }>
                <img className="w-full h-full" src={sku.stockImg} />
              </Access>
            </div>
            <Input placeholder="" />
          </div>
        })
      }
      <div className="flex justify-center">
        <Button>添加SKU</Button>
      </div>
    </Container>
  )
}

export default GoodsStock